<template>
  <div>
    <div class="saveButton">
      <Button size="small" type="primary" @click="saveParameter">保存</Button>
    </div>
    <Card :bordered="false" :dis-hover="true">
      <Form
        label-position="right"
        :label-width="150"
        :model="parameter"
        :rules="parameterValidate"
        ref="parameter"
      >
        <FormItem label="访问地址" prop="value.URL">
          <Input
            v-model="parameter.value.URL"
            placeholder="请输入访问地址，示例：http://192.168.1.1:8080/"
          />
        </FormItem>
        <FormItem label="发送报告(邮件)" prop="value.SEND_EMAIL_REPORT">
          <i-switch
            true-color="#13ce66"
            false-color="#ff4949"
            v-model="parameter.value.SEND_EMAIL_REPORT"
          >
            <span slot="open">Y</span>
            <span slot="close">N</span>
          </i-switch>
        </FormItem>
        <div v-show="parameter.value.SEND_EMAIL_REPORT">
          <FormItem label="收件人" prop="value.TO">
            <Input
              v-model="parameter.value.TO"
              placeholder="请输入收件人，以英文逗号分隔"
            />
          </FormItem>
          <FormItem label="抄送人">
            <Input
              v-model="parameter.value.CC"
              placeholder="请输入抄送人，以英文逗号分隔"
            />
          </FormItem>
        </div>
        <FormItem label="发送报告(钉钉)" prop="value.SEND_DINGTALK_REPORT">
          <i-switch
            true-color="#13ce66"
            false-color="#ff4949"
            v-model="parameter.value.SEND_DINGTALK_REPORT"
          >
            <span slot="open">Y</span>
            <span slot="close">N</span>
          </i-switch>
        </FormItem>
      </Form>
    </Card>
  </div>
</template>
<script>
import {
  getParameters,
  createParameter,
  updateParameter,
} from "@/api/HttpAutoTestService/parameter";
export default {
  name: "report",
  mounted() {
    getParameters({ key: "REPORT" }).then((res) => {
      const data = res.data;
      let results = data.results;
      if (results.length > 0) {
        this.parameter.id = results[0].id;
        this.parameter.name = results[0].name;
        this.parameter.key = results[0].key;
        this.parameter.value = JSON.parse(results[0].value);
      }
    });
  },
  data() {
    const validateTO = (rule, value, callback) => {
      if (this.parameter.value.SEND_EMAIL_REPORT && value == "") {
        callback(new Error("必填项"));
      }
      callback();
    };
    return {
      parameter: {
        id: "",
        name: "测试报告",
        key: "REPORT",
        value: {
          URL: "",
          TO: "",
          CC: "",
          SEND_EMAIL_REPORT: true,
          SEND_DINGTALK_REPORT: true,
        },
      },
      parameterValidate: {
        "value.URL": [{ required: true, message: "必填项", trigger: "blur" }],
        "value.SEND_EMAIL_REPORT": [
          {
            required: true,
            message: "必填项",
            trigger: "change",
            type: "boolean",
          },
        ],
        "value.TO": [
          { required: true, validator: validateTO, trigger: "blur" },
        ],
        "value.SEND_DINGTALK_REPORT": [
          {
            required: true,
            message: "必填项",
            trigger: "change",
            type: "boolean",
          },
        ],
      },
    };
  },
  methods: {
    saveParameter() {
      let parameter = {
        id: this.parameter.id,
        name: this.parameter.name,
        key: this.parameter.key,
        value: JSON.stringify(this.parameter.value),
      };
      this.$refs["parameter"].validate((valid) => {
        if (valid) {
          if (parameter.id) {
            updateParameter(parameter).then((res) => {
              this.$Message.info("保存成功");
            });
          } else {
            delete parameter["id"];
            createParameter(parameter).then((res) => {
              if (res.status === 201) {
                this.parameter.id = res.data.id;
                this.$Message.info("保存成功");
              }
            });
          }
        }
      });
    },
  },
};
</script>
<style scoped>
.saveButton {
  display: flex;
  justify-content: flex-end;
}
</style>
